<template>
  <div class="contact-us-container">
    <div class="title-container">
      {{ $t('contactUs.title') }}
    </div>
    <div class="contact-container">
      <div class="map-container">
        <div class="map-text">
          <h5 style="text-align: center">{{ $t('contactUs.incubator') }}</h5>
          <h6>{{ $t('contactUs.email') }}</h6>
          <h6>shangjun2012@163.com</h6>
          <h6>{{ $t('contactUs.address') }}</h6>
          <h6 v-html="$t('contactUs.addressDetail')"></h6>
          <div class="text-container">
            <h5 style="text-align: center">{{ $t('contactUs.followUs') }}</h5>
          </div>
          <img src="../../assets/QRCode.png" alt="QR Code" class="qrcode">
        </div>
        <BaiduMap></BaiduMap>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaiduMap from '@/components/ContactUs/BaiduMap.vue'
import { useI18n } from 'vue-i18n';
import { onMounted, watch } from 'vue';

const { locale } = useI18n();

const updateQRCodeStyle = (lang) => {
  const qrCode = document.querySelector('.qrcode');
  if (qrCode) {
    if (lang === 'zh') {
      qrCode.style.width = '100%';
      qrCode.style.marginLeft = '0';
    } else {
      qrCode.style.width = '100%';
      qrCode.style.marginLeft = '0';
    }
  }
};

watch(() => locale.value, (newLang) => {
  updateQRCodeStyle(newLang);
});

onMounted(() => {
  updateQRCodeStyle(locale.value);
});
</script>

<style scoped>
.contact-us-container {
  position: relative;
  padding: 28px;
  background: url(@/assets/background2.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}

.title-container {
  text-align: center;
  font-weight: 1000;
  font-size: 3vw;
  font-family: "STSong", "华文中宋", serif;
  color: #0C2785;
}

.contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}

.map-container {
  display: flex;
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 0.8vw;
  align-items: center;
  padding: 0.5vw;
  box-sizing: border-box;
  height: 72vh;
  width: 80vw;
  font-family: "STSong", "华文中宋", serif;
}

.map-text {
  padding: 1vw;
  width: 30vw;
  font-family: "STSong", "华文中宋", serif;
  font-size: 1.8vw; /* 使用 vw 单位设置字体大小 */
}

.text-container {
  margin-bottom: -0.5vw;
  text-align: center;
  font-family: "STSong", "华文中宋", serif;
}

.qrcode {
  width: 60vw;
  height: 38vh;
  margin-top: 8%;
  margin-left: -10%;
}

h5{
  margin-bottom: -0.5%;
}

h4, h3, h5 {
  font-weight: bold;
}
</style>
